<template>
  <section id="finance" class="clearfix">
    <div class="desc">
      <h3 class="title">我要融资</h3>

      <ul class="desc-content">
        <li><i class="icon icon-hook"></i>供应链金融全流程解决方案</li>
        <li><i class="icon icon-hook"></i>银行和权威金融机构直接提供</li>
        <li><i class="icon icon-hook"></i>审核状态实时查看，放贷速度快</li>
        <li><i class="icon icon-hook"></i>融资成本低，申请手续简单</li>
        <li><i class="icon icon-hook"></i>产品品种齐全，信息充分透明</li>
      </ul>

    </div>

    <div class="finance-content">
      <div class="finance-type clearfix">
        <div class="finance-item">
          <p class="title">采购融资</p>
          <a :href="`${platform.CONSTANT_JUMORE_RONG_URL}/product?bizType=1`" target="_blank" class="more">查看详情</a>
        </div>
        <div class="finance-item">
          <p class="title">存货融资</p>
          <a :href="`${platform.CONSTANT_JUMORE_RONG_URL}/product?bizType=2`" target="_blank" class="more">查看详情</a>
        </div>
        <div class="finance-item">
          <p class="title">销售融资</p>
          <a :href="`${platform.CONSTANT_JUMORE_RONG_URL}/product?bizType=3`" target="_blank" class="more">查看详情</a>
        </div>
      </div>

      <div class="banks clearfix">
        <ul>
          <li v-for="(item,index) in data" :key="item.adId" v-if="index<5">
            <a :href="item.path" target="_blank" :title="item.name" v-if="item.path">
              <img v-lazyload.cdn="item.picturePath" :alt="item.name"/>
            </a>

            <a target="_blank" :title="item.name" v-else>
              <img v-lazyload.cdn="item.picturePath" :alt="item.name"/>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
  import platform from '~/config/platform'

  export default {
    props: {
      data: {
        type: Array,
        require: true
      }
    },
    data () {
      return {
        platform
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>

  .desc {
    width: 285px;
    border-right: 1px solid #dedede;
    background-color: #f5f5f5; //rgba(255,255,255,.5);
    float: left;
    padding: 83px 22px 16px;
    position: relative;

    .title {
      position: absolute;
      height: 38px;
      line-height: 38px;
      font-size: 24px;
      color: #fff;
      width: 148px;
      font-weight: normal;
      top: 28px;
      border-radius: 2px;
      left: -1px;
      text-align: center;
      background-color: #f64f38;
    }
  }

  .slogan {
    font-size: 20px;
    padding-bottom: 28px;
  }

  .desc-content {
    color: #4a4a4a;
    margin-bottom: 22px;
    li {
      line-height: 28px;
      color: #6e6e6e;
    }

    .icon-hook {
      margin-right: 12px;
    }
  }

  .finance-content {
    float: right;
    width: 900px;
  }

  .finance-type {
    margin-left: -2px;
  }

  .finance-item {
    width: 300px;
    height: 169px;
    float: left;
    padding: 49px 80px 0;
    text-align: center;

    &+.finance-item{
      margin-left: 1px;
    }

    .title {
      font-size: 24px;
      color: #fff;
      margin-bottom: 20px;
    }

    .more {
      border: 1px solid #fff;
      background-color: transparent;
      width: 124px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      display: inline-block;
    }
  }

  .banks {
    li {
      float: left;
    }

    a {
      display: table-cell;
      vertical-align: middle;
      width: 180px;
      height: 92px;
      text-align: center;

      &:hover {
        box-shadow: 0 2px 4px 0 #dedede;
      }
    }

    img {
      max-height: 78px;
      max-width: 175px;
    }
  }

  @for $i from 1 to 4 {
    .finance-item:nth-child(#{$i}) {
      background: url("~assets/img/finance-#{$i}.png");
    }
  }

</style>
